<template>
    <div>
            <div class="crumbs-container">
                <!--<el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/main/' }">房源基建</el-breadcrumb-item>
                </el-breadcrumb> 修改一下界面-->
                <span class="title1">房源基建</span><!--新增行 -->
                <el-button type="primary" size="small" id="add_part" class="pull-right" @click="dialogVisible = true">
                    添加园区
                </el-button>
                <el-dialog
                        title="添加园区"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose">
                    <div class="input-container">
                        <div class="input-group">
                            园区名称:&nbsp;&nbsp;&nbsp;
                            <div class="input-field">
                                <el-input class="short-input" v-model="parkNewmen.parkArea"
                                          placeholder="请输入园区名称"></el-input>
                            </div>
                        </div>
                        <div class="input-group">
                            所在校区:&nbsp;&nbsp;&nbsp;
                            <div class="input-field">
                                <el-input class="short-input" v-model="parkNewmen.campus"
                                          placeholder="请输入所在校区"></el-input>
                            </div>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
                </el-dialog>
            </div>
        <el-table
                :data="users"
                stripe
                fit
                style="width: 100%">run
            <el-table-column
                    prop="parkArea"
                    label="园区名称"
                    span="4">
            </el-table-column>
            <el-table-column
                    prop="campus"
                    label="所在校区"
                    span="4">
            </el-table-column>
            <el-table-column
                    prop="number"
                    span="4"
                    label="楼栋数量">
            </el-table-column>
            <el-table-column
                    prop="address"
                    span="4"
                    label="房间总数">
            </el-table-column>
            <el-table-column
                    prop="address"
                    span="4"
                    label="床位总数">
            </el-table-column>
            <el-table-column
                    label="操作"
                    span="4">
            <template v-slot:default="scope">
                    <el-button class="text-link-button" size="small" type="text" @click="complie(scope.row)">编辑</el-button>
                    <el-button class="text-link-button" size="small" type="text" @click="removeBtn(scope.row.parkArea)"
                               id="delete_button">删除
                    </el-button>
            </template>
            </el-table-column>
        </el-table>
        <ParkAdd @ok="getUserList" ref="parkNew"/>
    </div>
</template>

<script>
import {userList, removePark, addPark} from '../../../../api/park'
import ParkAdd from '../../components/user/ParkAdd.vue'

export default {
  name: 'first',
  components: {
    ParkAdd
  },
  // eslint-disable-next-line
    data() {
    return {
      dialogVisible: false, // 控制对话框的显示与隐藏
      parkNewmen: {},
      query: {
        parkArea: '', // 园区名称
        campus: '', // 所在校区
        number: ''
      },
      users: []
    }
  },
  methods: {
    getUserList () {
      userList(this.query).then(res => {
        console.info(res)
        // console.log(res)
        this.users = res.data.records
      })
    },
    // 删除方法
    removeBtn (parkArea) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removePark(parkArea).then(res => {
          if (res.data === true) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getUserList()
          } else {
            this.$message({
              message: '删除失败',
              type: 'warning'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    confirm () {
      // 这里可以添加保存园区信息的逻辑
      console.log('保存园区名称：', this.parkNewmen.parkArea, '所在校区：', this.parkNewmen.parkArea)
      // this.parkNewmen = JSON.parse(JSON.stringify(parkNewmen))
      addPark(this.parkNewmen).then(res => {
        if (res.data === true) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        }
      })
      // 关闭对话框
      this.dialogVisible = false
      // 可以在这里调用 API 保存数据到服务器
    },
    // 编辑部分
    complie (row) {
      this.$refs.parkNew.show(row)
    }
  },
  created () {
    this.getUserList()
  }
}
</script>

<style>
.title1 {
    font-size: 16px;
    font-face: Source Han Sans CN;
    font-weight: 700;
    letter-spacing: 0;
    padding: 16px;
    // 其它界面line-height为60px，但视觉效果上来看这个值更合适？如有必要需进行再次修改
    line-height: 30px;
}

#delete_button {
    color: red;
}

.crumbs-container {
    display: flex;
    align-items: center; /* 如果需要垂直居中 */
}

.pull-right {
    margin-left: auto; /* 将元素推到右侧 */
}

.text-link-button {
    background: none; /* 移除背景 */
    border: none; /* 移除边框 */
    color: blue; /* 设置文字颜色 */
    text-decoration: underline; /* 添加下划线 */
    padding: 0; /* 移除内边距 */
    cursor: pointer; /* 鼠标悬停时显示手形光标 */
    /* 可能需要添加更多样式来完全模拟链接的外观 */
}

.input-container {
    display: flex;
    flex-direction: column; /* 如果需要垂直排列，保留此行 */
    /* 如果需要水平排列，请注释掉上一行并取消注释下一行 */
    /* flex-direction: row; */
}

.input-group {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-bottom: 10px; /* 底部间隔 */
}

.input-group span {
    margin-right: 10px; /* 右侧间隔，仅当 flex-direction 为 row 时有效 */
}

/* 如果需要水平排列，并且想要控制输入框之间的间隔，可以在 el-input 上添加 margin-right */
/* .input-group .el-input:not(:last-child) {
    margin-right: 20px;
} */
.short-input {
    /* 缩短输入框的宽度 */
    width: calc(100% + 50px); /* 假设我们给文本标签和输入框之间留出了一些空间 */
    /* 或者使用百分比，比如 width: 70%;，但这取决于你的具体布局需求 */
}

.input-field {
    /* 如果需要，可以在这里设置一些内边距或边距来分隔文本和输入框 */
    display: inline-block; /* 或者其他适当的display值 */
    vertical-align: top; /* 如果需要，对齐文本和输入框 */
}
</style>
